<template>
  <div class="Orderbox">
    <!-- 输入框 -->
    <div class="input-box">
      <input type="text" placeholder="下单人姓名" focus />
      <input type="text" placeholder="下单公司" />
      <input type="text" placeholder="主持人姓名" />
      <input type="text" placeholder="下单时间" />

      <select>
        <option value="">全部状态</option>
        <option value="">待主持</option>
        <option value="">已主持</option>
        <option value="">已删除</option>
      </select>
      <select>
        <option value="">全部角色</option>
        <option value="">婚庆公司</option>
        <option value="">策划师</option>
        <option value="">新人</option>
        <option value="">自添订单</option>
      </select>
    </div>
    <div class="input-left">
      <div class="input-time">
        典礼时间： <input type="text" placeholder="开始时间" /> --
        <input type="text" placeholder="结束时间" />
      </div>
      <div class="desc">共检索到28条记录，总额度XX元</div>
    </div>
    <div class="input-right">
      <el-button type="primary" plain style="width: 136px">搜索</el-button>
    </div>
    <div class="table-box">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="hid" label="编号" width="50"> </el-table-column>
        <el-table-column prop="orderphone" label="下单人电话" width="120">
        </el-table-column>
        <el-table-column prop="cname" label="下单公司"> </el-table-column>
        <el-table-column prop="hname" label="主持人"> </el-table-column>
        <el-table-column prop="hoteladree" label="酒店名称地址">
        </el-table-column>
        <el-table-column prop="ordertime" label="下单时间"> </el-table-column>
        <el-table-column prop="ceremonydate" label="典礼日期事间">
        </el-table-column>
        <el-table-column prop="price" label="金额"> </el-table-column>
        <el-table-column prop="status" label="订单状态"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import api from "../../../api";
export default {
  name: "Order",
  data() {
    return {
      tableData: [],
    };
  },
  components: {},
  mounted() {
    api.getSearchOrder({ search: "" }).then((res) => {
      // console.log(res.data);
      for (let i = 0; i < res.data.length; i++) {
        this.tableData.push({
          hid: res.data[i].hid,
          orderphone: res.data[i].orderphone,
          cname: res.data[i].cname,
          hname: res.data[i].hname,
          hoteladree: res.data[i].hoteladree,
          ordertime: res.data[i].ordertime,
          ceremonydate: res.data[i].ceremonydate,
          price: res.data[i].price,
          status: res.data[i].status,
        });
      }
    });
  },
};
</script>

<style scoped>
.input-box {
  margin-left: 144px;
  margin-top: -10px;
}
input {
  border: solid 1px;
  outline: none;
  margin: 7px;
  height: 25px;
}
select {
  width: 113px;
  margin: 7px;
  height: 27px;
}
.input-time {
  margin-left: -344px;
}
.desc {
  margin-left: -565px;
}
.input-right {
  float: right;

  margin-top: -49px;
}
.table-box {
  left: 143px;
  width: 1000px;
  top: 120px;
  position: absolute;
}
</style>